<template>
  <div>
    <t-space direction="vertical" style="width: 100%">
      <t-input size="large" placeholder="请输入注册码" v-model="data.code"/>
      <t-input size="large" placeholder="请输入用户名，6~20位字符" v-model="data.username"/>
      <t-input size="large" placeholder="请输入登录密码，不低于6位字符" type="password" v-model="data.password"/>
      <t-input size="large" placeholder="请再次输入登录密码，不低于6位字符" type="password" v-model="data.password2"/>
      <template v-if="data.password !== ''">
        <template v-if="data.password !== data.password2">
          <t-alert theme="error">两次输入的新密码不一样</t-alert>
        </template>
      </template>
      <t-button block size="large" @click="OnRegister"
                :disabled="data.username === '' || data.password === '' || data.code === ''">确认注册账号
      </t-button>
    </t-space>
  </div>
</template>
<script setup lang="ts">
import {reactive} from "vue";
import {LoadingPlugin, MessagePlugin} from "tdesign-vue-next";
import api from "../../../api/api";

const data = reactive({
  code: '',
  username: '',
  password: '',
  password2: ''
})

const OnRegister = async () => {
  LoadingPlugin(true)
  let res = await api.User.Register({
    code: data.code,
    user: data.username,
    pwd: data.password
  })
  LoadingPlugin(false)
  if (res != null) {
    window.sessionStorage.setItem('username', data.username)
    await MessagePlugin.success('注册成功')
  }
}
</script>